1import {useState, useReducer, useEffect} from 'react';
  2import {useTranslation} from 'react-i18next';
  3import {useRouter} from 'next/router';
  4import Layout from '../../layouts/Default';
  5import Fab from '../../containers/Fab';
  6import CarColumns from '../../containers/CarColumns';
  7import NewCarDialog from '../../containers/NewCarDialog';
  8import AddToMyEventDialog from '../../containers/AddToMyEventDialog';
  9import Loading from '../../containers/Loading';
 10import EventBar from '../../containers/EventBar';
 11import useToastStore from '../../stores/useToastStore';
 12import {
 13  useEventQuery,
 14  useUpdateEventMutation,
 15  Event as EventType,
 16} from '../../generated/graphql';
 17import useEventStore from '../../stores/useEventStore';
 18
 19interface Props {
 20  eventId: string;
 21}
 22
 23const Event = ({eventId}: Props) => {
 24  const {t} = useTranslation();
 25  const addToast = useToastStore(s => s.addToast);
 26  const setEvent = useEventStore(s => s.setEvent);
 27  const eventUpdate = useEventStore(s => s.event);
 28  const setIsEditing = useEventStore(s => s.setIsEditing);
 29  const {
 30    data: {event} = {},
 31    loading,
 32    error,
 33  } = useEventQuery({variables: {id: eventId}});
 34  const [updateEvent] = useUpdateEventMutation();
 35  const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
 36  const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
 37
 38  useEffect(() => {
 39    if (event) setEvent(event as EventType);
 40  }, [event]);
 41
 42  const onSave = async e => {
 43    try {
 44      const {id, ...data} = eventUpdate;
 45      delete data.__typename;
 46      delete data.cars;
 47      await updateEvent({variables: {id, eventUpdate: data}});
 48      setIsEditing(false);
 49    } catch (error) {
 50      console.error(error);
 51      addToast(t('event.errors.cant_update'));
 52    }
 53  };
 54
 55  const onShare = async () => {
 56    if (!event) return null;
 57    // If navigator as share capability
 58    if (!!navigator.share)
 59      return await navigator.share({
 60        title: `Caroster ${event.name}`,
 61        url: `${window.location.href}`,
 62      });
 63    // Else copy URL in clipboard
 64    else if (!!navigator.clipboard) {
 65      await navigator.clipboard.writeText(window.location.href);
 66      addToast(t('event.actions.copied'));
 67      return true;
 68    }
 69  };
 70
 71  if (loading) return <Loading />;
 72
 73  return (
 74    <Layout
 75      pageTitle={t('event.title')}
 76      menuTitle={t('meta.title', {title: event.name})}
 77      displayMenu={false}
 78    >
 79      <EventBar
 80        event={event}
 81        onAdd={setIsAddToMyEvent}
 82        onSave={onSave}
 83        onShare={onShare}
 84      />
 85      <CarColumns toggleNewCar={toggleNewCar} />
 86      <Fab onClick={toggleNewCar} open={openNewCar} aria-label="add-car" />
 87      <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
 88      {/* <AddToMyEventDialog
 89        event={event}
 90        open={isAddToMyEvent}
 91        onClose={() => setIsAddToMyEvent(false)}
 92      /> */}
 93    </Layout>
 94  );
 95};
 96
 97export default props => {
 98  const router = useRouter();
 99  const {eventId} = router.query;
100
101  if (!eventId) return null;
102
103  return <Event {...props} eventId={eventId} />;
104};